<template>
  <div class="galary">
    <!-- 安装ly-tab: 移动端的可触摸滑动具有回弹效果,在main.js中引入，在组件页引用 -->
    <!-- 结构引入 -->
    <ly-tab
        class="tabColor"
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="handleClick"  
        >
        <!-- @change="handleClick" 用来指明点击的目标对象 -->
    </ly-tab>
    <div class="cate">
        <span>全部</span>
        <span>其它</span>
    </div>
    <!-- 动态组件通过component标签来实现 -->
    <component :is="type" :imgList="imgList"></component>
  </div>
</template>

<script>
import galaryContent from './galaryContent'
export default {
    name: 'detailGalary',
    // 对Detail组件派发过来的数据进行接收
    props:{
      galaryList: Array,
      imgList: Array //需要再次派发出去
    },
    components:{
      galaryContent
    },
    data(){
      return{
        type: 'galaryContent',//动态组件的名称
        selectedId: 0,
        items: [],
        options: {
            activeColor: '#0bc071'
        },
      }
    },
    computed:{
        // 循环items的数据
        loopGalaryList(){
            for(let i=0;i<this.galaryList.length;i++){
                let item={
                    label:this.galaryList[i]
                }
                this.items.push(item)
            }
        }
    },
    mounted(){
        // 调用loopGalaryList方法
        this.loopGalaryList
    },
    methods:{
      // 
      handleClick(item,index){
        // 将目标对象点击的内容，保存到store中，进行全局存储
        this.$store.state.index=index
      }
    }
}
</script>

<style lang="stylus" scoped>
.galary
  position:absolute
  top:.88rem
  left:0
  right:0
  bottom:0
  color:#fff
  z-index:100
  background:#fff
  .galary>a
    color:#000
  .tabColor
    background:#fff
    border-color:#fff
  .cate
    background:#edf0f5
    line-height:.6rem
    color:#000
  .cate > span
    margin-left:.22rem
    font-size:.3rem
  .wrapper
    background:#fff
    .imgWrapper
      width:47%
      background:red
      margin:.12rem
      float:left
    .imgWrapper > img
      width:100%
</style>